<template>
  <div class="table-list" v-if="musicList.length">
    <b-table show-border stripe stripe-background-color="#f9f9f9">
      <b-table-head slot="head" split split-color="var(--border)">
        <b-table-tr>
          <b-table-td width="50px" v-if="lines[0]"></b-table-td>
          <b-table-td width="60px" v-if="lines[1]">操作</b-table-td>
          <b-table-td v-if="lines[2]">音乐标题</b-table-td>
          <b-table-td v-if="lines[3]">歌手</b-table-td>
          <b-table-td v-if="lines[4]">专辑</b-table-td>
          <b-table-td width="120px" v-if="lines[5]">时长</b-table-td>
        </b-table-tr>
      </b-table-head>
      <b-table-body slot="body">
        <b-table-tr v-for="(item, index) in musicList" :key="index" @dblclick.native="playMusic(index)">
          <b-table-td width="50px" v-if="lines[0]">
            <span v-show="!(playing ? index == playIndex && item.name == playName : id == playId && index == playIndex && item.name == playName)"> {{ getListIndex(index) }}</span>
            <i class="iconfont icon-V song_icon" v-show="playing ? index == playIndex && item.name == playName : id == playId && index == playIndex && item.name == playName"></i>
          </b-table-td>
          <b-table-td width="60px" v-if="lines[1]" class="dance-music-table-tr-td-two">
            <i class="iconfont icon-xihuan" v-if="!newsongs" />
            <div class="dance-music-table-tr-td-two-card" v-if="newsongs">
              <img v-lazy="item.pic" alt="" />
              <div class="card-play">
                <i class="iconfont icon-icon_play"></i>
              </div>
            </div>
          </b-table-td>
          <b-table-td v-if="lines[2]">{{ item.name }}</b-table-td>
          <b-table-td v-if="lines[3]" class="table-list-body-artist">{{ item.artist }}</b-table-td>
          <b-table-td v-if="lines[4]">{{ item.album }}</b-table-td>
          <b-table-td width="120px" v-if="lines[5]">{{ item.time }}</b-table-td>
        </b-table-tr>
      </b-table-body>
    </b-table>
  </div>
</template>

<script>
import { playMusic } from '../../../mixin/global/play-music'
import { playing } from '../../../player/playing'
import { randomStr } from '../../../utils/random'
export default {
  name: 'SongList',
  data() {
    return {
      id: randomStr()
    }
  },
  props: {
    musicList: {
      type: Array,
      default: () => []
    },
    lines: {
      type: Array,
      default: () => []
    },
    newsongs: {
      type: Boolean,
      default: false
    },
    playing: {
      type: Boolean,
      default: false
    }
  },
  mixins: [playMusic, playing],
  methods: {
    /** 获取音乐列表下标 */
    getListIndex(index) {
      let currentIndex = 0
      currentIndex = index < 9 ? '0' + (index + 1) : index + 1
      if (currentIndex == this.getLength) {
        this.$emit('refresh')
      }
      return currentIndex
    },
    handleDbclick(index) {
      if (this.player) {
        return this.$bus.$emit('playMusicListItem', index)
      }
      this.playMusic(index)
    }
  }
}
</script>

<style lang="less" scoped>
.table-list {
  width: 100%;
  font-size: 14px;
}
.dance-music-table-tr-newsongs {
  display: flex;
  align-items: center;
}
.song_icon {
  color: var(--primary);
}
.dance-music-table-tr-td-two {
  img {
    width: 100%;
    border-radius: 4px;
  }
  &-card {
    position: relative;
  }
  .card-play {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    .icon-icon_play {
      font-size: 14px;
      color: var(--main-color);
    }
  }
}
</style>
